{% import "macros.html" as macros %}

<h4 id="{$ class.name $}" class="docs-header-link docs-api-h4 docs-api-class-name">
  <span header-link="{$ class.name $}"></span>
  <code>{$ class.name $}</code>
  {% if class.extendedDoc %}
  <span class="docs-api-class-extends-clauses">
    <span class="docs-api-class-extends-label">extends</span>
    <a href="{$ class.extendedDoc.publicUrl $}" class="docs-api-class-extends-type">
      {$ class.extendedDoc.name $}
    </a>
  </span>
  {% endif %}
</h4>

{%- if class.description -%}
<p class="docs-api-class-description">{$ class.description | marked | safe $}</p>
{%- endif -%}

{%- if class.selectors and class.isComponent -%}
<p class="docs-api-component-selectors">
  <span class="docs-api-class-selector-label">Selector:</span>
  {% for selector in class.selectors %}
    <span class="docs-api-class-selector-name">{$ selector $}</span>
  {% endfor %}
</p>
{%- endif -%}

{%- if class.selectors and class.isDirective -%}
<p class="docs-api-directive-selectors">
  <span class="docs-api-class-selector-label">Selector:</span>
  {% for selector in class.selectors %}
    <span class="docs-api-class-selector-name">{$ selector $}</span>
  {% endfor %}
</p>
{%- endif -%}

{%- if class.exportAs -%}
<span class="docs-api-class-export-label">Exported as:</span>
<span class="docs-api-class-export-name">{$ class.exportAs $}</span>
{%- endif -%}

{%- if class.isDeprecated -%}
<div class="docs-api-class-deprecated-marker" {$ macros.deprecationTitle(class) $}>
  Deprecated
</div>
{%- endif -%}

{$ propertyList(class.properties) $}

{$ methodList(class.methods) $}
